<template>
  <view class="content_bank">
    <nut-input v-model="keyword" placeholder="请输入姓名/公司名称/卡号" @update:model-value="search">
      <template #left>
        <Search></Search>
      </template>
    </nut-input>
    <view class="list_container" v-if="showList.length">
      <nut-list class="lists" :listData="showList" style="height: calc(100vh - 92rpx);">
        <template v-slot="{ item, index }">
          <list-item
              :item="item"
              :index="index"
              :key="index"
              @delAccount="delAccount"
              @editAccount="editAccount"
              @setDefaultAccount="setDefaultAccount"
          ></list-item>
        </template>
      </nut-list>
    </view>
    <view v-else>
      <view class="container_empty">
        <image mode="aspectFit" src="../../assets/images/index/empty3.png"></image>
        <view class="empty_text">暂无信息</view>
      </view>
    </view>
    <view class="new_account">
      <view class="btn" @click="addAcount">
        新增银行账户
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, reactive, watch } from "vue";
import ListItem from "./listItem.vue";
import {$post,$get,$del} from "@/@api";
import Taro, {useDidShow} from "@tarojs/taro";
import {Search} from "@nutui/icons-vue-taro";
import useUserInfoStore from "@/store/user";
import bankAccountInfoStore from "@/store/bankAccount";
const userStore = useUserInfoStore()
const bankAccountStore = bankAccountInfoStore()
const showList = ref([])
const allList = ref([])
const keyword = ref<string>('')
function search() {
  showList.value = allList.value.filter((item) => {
    return (
        item.accountNo.indexOf(keyword.value) > -1 ||
        item.accountName.indexOf(keyword.value) > -1
    );
  });
}

async function getList() {
  // Taro.showLoading({
  //   title: "加载中",
  //   mask: true,
  // });
  keyword.value = ''
  const res: any = await $post(
      "/selfmachine-system/account/MiniProgramList",
      {
        keyword: keyword.value,
        customerCode: userStore.userInfo.customerCode,
      }
  )
  if(res.data.code === 200){
    let resData = res.data.data || []
    resData = resData.map((item)=>{
      return {...item,default:item.isDefault == '1'}
    })
    allList.value = resData
    showList.value = resData
  }
}

async function delAccount(data: any) {
  Taro.showModal({
    title: '提示',
    content: '确认删除该账户？',
    success: async(r)=>{
      if(r.confirm){
        const res: any = await $del(
            "/selfmachine-system/account/delete",
            {
              btcaId: data.btcaId,
              customerCode: userStore.userInfo.customerCode,
            }
        )
        if(res.data.code === 200){
          Taro.showToast({
            icon: 'success',
            title: '删除成功'
          })
          getList()
        }
      }
    }
  })
}

const editAccount = (data: any) => {
  bankAccountStore.info = data
  Taro.navigateTo({
    url: "/pages/myBankAccount/editAccount",
  })
}

const addAcount = () => {
  bankAccountStore.resetInfo()
  Taro.navigateTo({
    url: "/pages/myBankAccount/editAccount",
  })
}

const setDefaultAccount = async (data: any) => {
  const res: any = await $post(
      "/selfmachine-system/account/addOrUpdate",
      {
        customerCode: userStore.userInfo.customerCode,
        btcaId: data.btcaId,
        isDefault: data.isDefault ? '1' : '0'
      }
  )
  if(res.data.code === 200){
    Taro.showToast({
      icon: "success",
      title: "修改成功",
    })
    getList()
  }
}

useDidShow(()=>{
  getList()
})

</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.content_bank {
  width: 100%;
  .lists {
    box-sizing: border-box;
    width: 100%;
    margin-top: 2rpx;
    padding-bottom: 140rpx;
  }
}
.new_account {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 128rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  .btn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background-color: #0966ff;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
  }
}
.container_empty {
  width: 80%;
  margin: 280rpx auto;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }

}
</style>
